<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <title>v-for的基本使用</title>  
  <style>  
    .item-container {  
      display: flex; /* 使用 Flexbox 布局 */  
      flex-wrap: wrap; /* 自动换行 */  
      gap: 5px; /* 设置间隔 */  
    }  
    .item {  
      width: 200px;  
      height: 200px;  
      background-color: orange;  
    }  
    .item .title {  
      color: red;  
    }  
  </style>  
</head>  
<body>  
  <div id="app">  
    <h2>电影列表</h2>  
    <ul>  
      <li v-for="movie in movies">{{ movie }}</li>  
    </ul>  

    <ul>  
      <li v-for="(movie, index) in movies">{{ index + 1 }} - {{ movie }}</li>  
    </ul>  

    <h2> 商品列表 </h2>  
    <div class="item-container"> <!-- 添加一个容器用于横向排列 -->
      <div class="item" v-for="item in products" :key="item.id">
        <h3 class="title">{{ item.name }}</h3>
        <span>价格: {{ item.price }}</span>
        <p>秒杀: {{ item.desc }}</p>
      </div>  
    </div>  
  </div>  

  <script src="../lib/vue.js"></script>  
  <script>  
    // 使用vue  
    const app = Vue.createApp({  
      data: function () {  
        return {  
          movies: ["星际穿越", "哪吒", "黑神话", "杨戬"],  
          products: [  
            { id: 110, name: "小米", price: 4999, desc: "8折" },  
            { id: 111, name: "华为", price: 5999, desc: "首售" },  
            { id: 112, name: "红米", price: 3999, desc: "国补" }  
          ]  
        };  
      },  
      methods: {  
      }  
    });  

    // 挂载   
    app.mount("#app");  
  </script>  

</body>  
</html>  